<template>
  <div class="plan_stat">
    <Head :info="datums.baseInfo"></Head>
    <StatisticsSearch :options="statisOptions" @submit="onSubmit" />
    <Total :info="datums.collect.data_screen"></Total>
    <LineCard :info="datums.collect.data_trend"></LineCard>
    <AddShop ref="oneTableRef" :title="`短信触达明细`" :info="datums.shopInfo" :tableParams="tableParams" :reach="noteReach" :type="2" @submit="getTable" @export="exportDetails" @send="sendMsg"></AddShop>
    <AddShop ref="towTableRef" :title="`员工企微消息明细`" :info="datums.taskInfo" :tableParams="tableParamsTow" :reach="qwReach" :type="1" :viewId="datums.baseInfo?.basic_word_id" @submit="getTable" @export="exportDetails" @send="sendMsg"></AddShop>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onBeforeMount, onMounted, nextTick } from 'vue'
  import Head from './components/Header.vue'
  import Total from './components/Total.vue'
  import LineCard from './components/LineCard.vue'
  import AddShop from './components/AddShop.vue'
  import { useStore } from '@/store'
  import { useRoute } from 'vue-router'
  import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue'
  import { baseInfo, census, addShop, expDetails } from '@/api/smartMarketing/precision/stat'

  const oneTableRef: any = ref(null)
  const towTableRef: any = ref(null)
  const store = useStore()
  const router = useRoute()

  // 公共参数
  let publicParams = reactive({
    market_rule_id: router.query.id, //营销规则ID
    time_type: '', //时间类型，1：今天，2：本周，3：本月，4：自定义
    filter_time: [] //筛选时间
  })
  const tableParams = ref({
    touch_type: 2,
    touch_status: 0,
    filter_time: [],
    market_rule_id: +publicParams.market_rule_id!
  })
  const tableParamsTow = ref({
    touch_type: 1,
    touch_status: 0,
    filter_time: [],
    market_rule_id: +publicParams.market_rule_id!
  })
  const tablePage = reactive({
    page: 1,
    page_size: 15
  })
  // 所有数据
  const datums = reactive({
    baseInfo: {},
    collect: {
      data_screen: {},
      data_trend: {}
    },
    shopInfo: [],
    taskInfo: []
  })
  // 短信触达
  const noteReach = reactive([
    { id: 0, label: '全部' },
    { id: 2, label: '已触达' },
    { id: 1, label: '未触达' }
  ])
  // 员工企微触达
  const qwReach = reactive([
    { id: 0, label: '全部' },
    { id: 2, label: '已执行' },
    { id: 1, label: '未执行' }
  ])
  const statisOptions = reactive([
    {
      label: '时间筛选',
      type: 'dateFilter',
    }
  ])
  const onSubmit = (data: any) => {
    const p = {
      filter_time: data.times || [],
      market_rule_id: router.query.id,
      time_type: data.currentId + 1
    }
    tableParams.value.filter_time = tableParamsTow.value.filter_time = data.times || []
    tableParams.value = { ...p, ...tableParams.value }
    tableParamsTow.value = { ...p, ...tableParamsTow.value }
    nextTick(() => {
      if (data.times) {
        searchApi(p)
        oneTableRef.value.onLoad()
        towTableRef.value.onLoad()
      }
    })
  }

  // 获取基本信息
  const getBaseInfo = (prams: string | number) => {
    baseInfo({ market_rule_id: prams }).then((res: any) => {
      datums.baseInfo = res
    })
  }
  // 获取统计数据
  const getStatData = () => {
    census(publicParams).then((res: any) => {
      datums.collect = res
    })
  }
  // 获取table数据
  const getTable = (obj: { touch_type: number; touch_status: number; market_rule_id: number }) => {
    if (obj.touch_type == 1) {
      towTableRef.value.onLoad()
    } else {
      oneTableRef.value.onLoad()
    }
  }
  // table 导出明细
  const exportDetails = (data: object) => {
    const res = { ...publicParams, ...data }
    expDetails(res).then((res: any) => {
      window.location.href = res.file_url
    })
  }
  // table 发送
  const sendMsg = (data: any) => {
    getTable({ ...data })
  }
  const searchApi = (data?: any) => {
    publicParams = { ...publicParams, ...data }
    getBaseInfo(+publicParams.market_rule_id!)
    getStatData()
  }
</script>
